/*
*产品销售统计
*/
/*
*业绩统计 
*/
import React from 'react';
import { Breadcrumb, Button, Input, Modal, message, Table, DatePicker, Cascader } from 'antd';
import $ from 'jquery';
import moment from 'moment';
import Config from '../../../common/config';
const config = new Config();
const token = sessionStorage.getItem('token');
const RangePicker = DatePicker.RangePicker;
const InputGroup = Input.Group;
class ProductSales extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      category: [],
      data: [],
      dates: [moment().startOf('day'), moment().startOf('day').add(1, 'day')]
    }
  }
  //生命周期函数 加载前
  componentWillMount() {
    this.getCategory();
    this.getdata();
  }
  //生命周期函数 加载完成后
  componentDidMount() {

  }
  //获取商品统计
  getdata(obj) {
    let data = {};
    if (obj) {
      data = obj;
    }
    $.ajax({
      type: 'get',
      url: config.CrmStatistics + '/productStatistics',
      data: data,
      headers: { Authorization: 'Bearer ' + token },
      success: res => {
        console.log(res);
        const data = res.data.map(item => {
          item.key = item.productid
          return item;
        })
        this.setState({ data })
      }
    })
  }
  //分类数据处理
  loopCategory(arr) {
    return arr.map(item => {
      item.label = item.categoryname;
      item.value = item.categoryid;
      if (item.children.length) {
        item.children = this.loopCategory(item.children);
      } else {
        delete item.children;
      }
      return item;
    })
  }
  //获取分类
  getCategory() {
    $.ajax({
      url: `${config.JuseGoods}/categories_sk/GetCategoryList`,
      type: "post",
      data: {
        categoryname: this.state.keyword,
        isenabled: this.state.status == "请选择" ? "" : this.state.status
      },
      async: true,
      success: res => {
        console.log(res);
        if (res.code === 200) {
          const category = this.loopCategory(res.data);
          this.setState({ category });
        }
      }
    })
  }
  //获取搜索时间
  getDate(dates, dateStrings) {
    console.log(dates, dateStrings);
    this.setState({ dates })
  }
  //重置搜索
  resetSearch() {
    this.setState({
      dates: [moment().startOf('day'), moment().startOf('day').add(1, 'day')]
    })
  }
  //搜索
  searchData() {
    const { category, dates } = this.state;
    console.log(name, dates, new Date(dates[0]).getTime());
    const data = {
      // productName: name,
      categoryId: category[category, length - 1], //商品分类id
      startDate: new Date(dates[0]).getTime(),
      endDate: new Date(dates[1]).getTime() - 1,
    }
    this.getdata(data);
  }
  //表格行选择
  rowSelection() {
    return {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(selectedRowKeys, selectedRows);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
      },
    }
  };
  render() {
    const columns = [
      { title: '产品名称', dataIndex: 'productname', key: 'productname', },
      { title: '销售总量', dataIndex: 'saleCount', key: 'saleCount', sorter: (a, b) => a.saleCount - b.saleCount },
      { title: '已发货数量', dataIndex: 'deliveryCount', key: 'deliveryCount', sorter: (a, b) => a.deliveryCount - b.deliveryCount },
      { title: '待发货数量', dataIndex: 'undeliveryCount', key: 'undeliveryCount', sorter: (a, b) => a.undeliveryCount - b.undeliveryCount },
      { title: '已签收数量', dataIndex: 'signCount', key: 'signCount', sorter: (a, b) => a.signCount - b.signCount },
    ]
    return (
      <div className='contentBox clearfix'>
        <div className='breadcrumb'>
          <Breadcrumb separator='>'>
            <Breadcrumb.Item>直销管理</Breadcrumb.Item>
            <Breadcrumb.Item>统计分析</Breadcrumb.Item>
            <Breadcrumb.Item>产品销售统计</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <div>
          <div style={{ overflow: 'hidden' }}>
            <div className='member-content-Search clearfix'>
              <div className='addetd addetd-a addetd-kk addr-yo'>
                <InputGroup compact>
                  <span className='chengge-a fkov-a' style={{ width: 100 }}>开始/结束时间:</span>
                  <div className='chengge-d' style={{ marginRight: 0 }}>
                    <RangePicker
                      ranges={{
                        '今天': [moment().startOf('day'), moment().endOf('day')],
                        '本周': [moment().startOf('week'), moment().endOf('week')],
                        '本月': [moment().startOf('month'), moment().endOf('month')],
                        '本年': [moment().startOf('year'), moment().endOf('year')],
                      }}
                      //disabledTime={this.disabledRangeTime.bind(this)}
                      showTime={{ hideDisabledOptions: true, format: 'HH:mm' }}
                      value={this.state.dates}
                      allowClear
                      onChange={this.getDate.bind(this)}
                      format="YYYY-MM-DD HH:mm"
                    />
                  </div>
                </InputGroup>
              </div>
            </div>
            <div className='member-content-Search clearfix'>
              <div className='addetd indtner shuerwq-1' style={{ width: 400 }}>
                <InputGroup compact>
                  <span className='chengge-a fkov-a' style={{ width: 100 }}>商品分类:</span>
                  <div className='chengge-d' style={{ marginRight: 0 }}>
                    <Cascader options={this.state.category} placeholder="请选择商品分类" style={{ width: 300 }} />
                  </div>
                </InputGroup>
              </div>
              <div className='addetd addetd-b indtner shuerwq-1'>
                <Input className='addetd-a-r' addonBefore="员工" placeholder="请输入" value={this.state.name} onChange={(e) => { this.setState({ name: e.target.value }) }} />
              </div>
              <Button type='primary' className='member-button-aa' onClick={() => { this.searchData() }}>搜索</Button>
              <Button type='primary' className='member-button-aa' onClick={() => { this.resetSearch() }}>重置</Button>
            </div>
          </div>
          <Table
            bordered
            defaultExpandAllRows
            columns={columns}
            rowSelection={this.rowSelection()}
            dataSource={this.state.data}
            pagination={false}
            className='totalTable'
          />
        </div>
      </div>
    )
  }
}

export default ProductSales;